<template>
  <div id="Doctor">
    <el-container class="main-container">
      <el-aside width="60px" class="nav-aside">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#000911"
          text-color="#fff"
          active-text-color="#ffd04b"
          unique-opened
          router
        >
          <router-link to="/doctor/MyPatient" class="a">
            <el-menu-item index="/doctor/MyPatient">
              <i class="el-icon-s-custom"></i>
            </el-menu-item>
          </router-link>

          <router-link to="/doctor/DetailData" class="a">
                    <el-menu-item index="/doctor/DetailData">
                        <i class="el-icon-s-custom"></i>
                        <span slot="title"></span>
                    </el-menu-item>
                </router-link>

          <router-link to="/doctor/Management" class="a">
            <el-menu-item index="/doctor/Management">
              <i class="el-icon-message-solid"></i>
            </el-menu-item>
          </router-link>

          <router-link to="/doctor/DoctorData" class="a">
            <el-menu-item index="/doctor/DoctorData">
              <i class="el-icon-tickets"></i>
            </el-menu-item>
          </router-link>
        </el-menu>
      </el-aside>

      <el-main class="content-main">
        <dv-border-box-1 class="content-border">
          <router-view></router-view>

          <div class="glass-container">
    <!--换字体-->
    <h1>实时数据检测</h1>
</div>

          <div class="decoration">
            <dv-decoration-5 style="width:100%;height:40px;" />"
          </div>

          <div class="circle">
            <dv-border-box-8>
    <div class="temperature" v-if="rank === 0">
    <dv-decoration-9>
      <div class="detaildata">体温</div>
      <div class="c"></div>
    </dv-decoration-9>
  </div>
  <div class="temperature" v-else-if="rank === 1">
    <dv-decoration-9 :color="['rgba(0, 255, 0, 0.7)', 'rgba(0, 255, 0, 0.5)']" :dur="3">
      <div class="detaildata">{{ temperatureDisplay }}</div>
      <div class="c"></div>
    </dv-decoration-9>
  </div>
  <div class="temperature" v-else-if="rank === 2">
    <dv-decoration-9 :color="['rgba(255, 215, 0, 0.7)', 'rgba(255, 215, 0, 0.7)']" :dur="3">
      <div class="detaildata">{{ temperatureDisplay }}</div>
      <div class="c"></div>
    </dv-decoration-9>
  </div>
  <div class="temperature" v-else-if="rank === 3">
    <dv-decoration-9 :color="['#FF00004D', '#FF00004D']" :dur="3">
      <div class="detaildata">{{ temperatureDisplay }}</div>
      <div class="c"></div>
    </dv-decoration-9>
  </div>


  <div class="heart" v-if="heart === 0">
  <dv-decoration-9 class="c2">
    <div class="detaildata">心率</div>
    <div class="c"></div>
  </dv-decoration-9>
</div>
<div class="heart" v-else-if="heart === 1">
  <dv-decoration-9 :color="['rgba(0, 255, 0, 0.7)', 'rgba(0, 255, 0, 0.7)']">
    <div class="detaildata">{{ heartDisplay }}</div>
    <div class="c"></div>
  </dv-decoration-9>
</div>
<div class="heart" v-else-if="heart === 2">
  <dv-decoration-9 :color="['rgba(255, 215, 0, 0.7)', 'rgba(255, 215, 0, 0.7)']">
    <div class="detaildata">{{ heartDisplay }}</div>
    <div class="c"></div>
  </dv-decoration-9>
</div>
<div class="heart" v-else-if="heart === 3">
  <dv-decoration-9 :color="['rgba(255, 0, 0, 0.7)', 'rgba(255, 0, 0, 0.7)']">
    <div class="detaildata">{{ heartDisplay }}</div>
    <div class="c"></div>
  </dv-decoration-9>
</div>


<div class="pressure" v-if="pressure === 0">
  <dv-decoration-9 class="c3">
    <div class="detaildata">血压</div>
    <div class="c"></div>
  </dv-decoration-9>
</div>

<div class="pressure" v-else-if="pressure === 1">
  <dv-decoration-9
    :color="['rgba(255, 0, 0, 0.7)', 'rgba(255, 0, 0, 0.7)']"
    class="c3">
    <div class="detaildata">{{ pressureDisplay }}</div>
    <div class="c"></div>
  </dv-decoration-9>
</div>

<div class="pressure" v-else-if="pressure === 2">
  <dv-decoration-9
    :color="['rgba(0, 255, 0, 0.7)', 'rgba(0, 255, 0, 0.7)']"
    class="c3">
    <div class="detaildata">{{ pressureDisplay }}</div>
    <div class="c"></div>
  </dv-decoration-9>
</div>
          </dv-border-box-8>
          </div>

          <el-container class="list">
            <dv-border-box-12>
              <dv-scroll-board
              :config="total"
              style="position: relative;width:95%;"
              class="total"
              @mouseover="handleRowHover"
              @mouseout="handleRowLeave"
              @click="handleRowClick"
              ref="tableContainer"
               />
            </dv-border-box-12>
          </el-container>

          <div class="time">
            <dv-border-box-10>
              <RealTimeClock></RealTimeClock>
          </dv-border-box-10></div>

       <div class="dangerous">
        <dv-border-box-12>
        <Danger></Danger>
      </dv-border-box-12>
       </div>

       <div class="warning">
      <dv-border-box-12>
      <Warning></Warning>
      </dv-border-box-12></div>

        </dv-border-box-1>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';
import RealTimeClock from '../components/time.vue';
import Dangerous from '../components/dangerous.vue';
import Warning from '../components/warning.vue';
import Danger from '../components/dangerous.vue';
import dangerousImg from '../assets/images/dangerous.png';
import warningImg from '../assets/images/warning.png';
import nullImg from '../assets/images/null.png';

export default {
  components:{
    RealTimeClock,
    Danger,
    Warning
  },
  data() {
    return {
      total: {
        header: ['科室', '床位', '患者ID', '体征（血压，血糖，血脂，尿酸）','状态'],
        columnWidth: ['12%', '12%', '12%', '45%', '19%'],
        headerAlign: ['center', 'center', 'center', 'center', 'center'],
        headerBGC: "#000e1d",
        headerHeight: 50,
        data: [],
        align: ['center'],
        evenRowBGC: "#000e1d",
        oddRowBGC: "#1d2746",
        indexHeader: '',
        index: true,
        carousel: 'page',
        hoverPause: true,
        rowNum: 13,
        isHtml: true,
      },
      rank:0,
      heart:0,
      pressure:0,
      pressureDisplay: '血压',
      rawPatientData: [],
    }
  },
  async mounted() {
    try {
      // 从localStorage获取医生手机号
      const doctorPhone = 13800138000;
      
      // 检查医生手机号是否存在
      if (!doctorPhone) {
        console.error('医生手机号不存在，请重新登录');
        this.total.data = [['请重新登录', '-', '-', '-', '-']];
        return;
      }
      
      // 向后端发送请求获取患者数据
      const res = await this.$axios.post('/myPatient', {
        DoctorPhone: doctorPhone
      });
      
      // 检查响应结构并提取数据
      let patientData = [];
      if (res.data && res.data.code === 200 && res.data.data) {
        patientData = res.data.data;
      } else if (Array.isArray(res.data)) {
        // 如果直接返回数组
        patientData = res.data;
      } else {
        this.total.data = [['数据格式错误', '-', '-', '-', '-']];
        return;
      }
      
      this.rawPatientData = patientData;
      this.total.data = patientData.map((item, index) => [
        item.department_name || '-',
        item.bed_number || '-',
        `患者${item.patient_id || '-'}`,  // 使用patient_id作为患者标识
        `${item.pressure || '-'}/${item.blood_sugar || '-'}/${item.triglyceride || '-'}/${item.uric_acid || '-'}`,
        `<div class="status-cell row-item"
        data-rowindex="${index}"
        style="cursor: pointer">
        <div class="status-cell" data-rowindex="${index}">
          <img src="${this.getStatusImage(item.status || 0)}"
               style="width:20px;height:20px;vertical-align:middle;"
               data-rowindex="${index}">
        </div>`
      ]);
      this.total = { ...this.total };

      this.$nextTick(() => {
        this.$refs.tableContainer.$el.addEventListener('click', this.handleTableClick);
      });
    } catch (error) {
      this.total.data = [['数据加载失败', '-', '-', '-', '-']];
    }
  },beforeDestroy() {
    //移除事件监听
    if (this.$refs.tableContainer) {
      this.$refs.tableContainer.$el.removeEventListener('click', this.handleTableClick);
    }
  },
  methods: {
handleTableClick(event) {
  const getRowIndex = (target) => {
    const row = target.closest('.row-item');
    return row?.dataset?.rowindex;
  };

  const index = getRowIndex(event.target);
  if (index >= 0) {
    const patient = this.rawPatientData[index];
    if (patient?.patient_id) {
      this.$router.push({
        path: `/detaildata/${encodeURIComponent(patient.patient_id)}`,
        query: { t: Date.now() }
      });
    }
  }
},
  getStatusImage(status) {
      switch(status) {
        case 1:
        return dangerousImg;
        case 2:
          return warningImg;
        default:
          return nullImg;
      }
    },
    handleRowHover({ rowIndex }) {
      const rows = this.$refs.tableContainer?.$el?.querySelectorAll('.row-item');
      if (rows && rows[rowIndex]) {
        rows[rowIndex].classList.add('hover-row');
      }
      const patient = this.rawPatientData[rowIndex];
      if (patient) {
        const temp = parseFloat(patient.temperature || '0');
        const heartStr = patient.heartbeat || '0';
        const heartValue = heartStr ? parseInt(heartStr.toString().replace(/[^0-9]/g, '')) : 0;
        const pressureStr = patient.pressure || '0/0';
        const systolic = pressureStr ? parseInt(pressureStr.toString().split('/')[0]?.replace(/\D/g, '')) : 0;
        
        if (!isNaN(temp) && temp > 0) {
          if (temp < 37) {
            this.rank = 1;
          } else if (temp <= 39) {
            this.rank = 2;
          } else {
            this.rank = 3;
          }
          this.temperatureDisplay = `${temp}°C`;
        }
        if (!isNaN(heartValue) && heartValue > 0) {
          if (heartValue < 40 || heartValue > 160) {
            this.heart = 3;
          } else if (heartValue <= 60) {
            this.heart = 2;
          } else {
            this.heart = 1;
          }
          if (!isNaN(systolic) && systolic > 0) {
            if (systolic >= 130 && systolic <= 139) {
              this.pressure = 1;
              this.pressureDisplay = `${systolic}/-mmHg`;
            } else if (systolic <= 140) {
              this.pressure = 2;
              this.pressureDisplay = `${systolic}/-mmHg`;
            }
          }
          this.heartDisplay = `${heartValue}次/分`;
        }
      }
    },
    handleRowLeave() {
      const rows = this.$refs.tableContainer?.$el?.querySelectorAll('.row-item');
      rows?.forEach(row => row.classList.remove('hover-row'));
      this.rank = 0;
      this.heart = 0;
      this.pressure = 0;
      this.temperatureDisplay = '体温';
      this.heartDisplay = '心率';
      this.pressureDisplay = '血压';
    },
    handleRowClick({ rowIndex }) {
      if (rowIndex >= 0 && this.rawPatientData[rowIndex]) {
        const patient = this.rawPatientData[rowIndex];
        if (patient.patient_id) {
          this.$router.push({
            path: `/detaildata/${encodeURIComponent(patient.patient_id)}`,
            query: { t: Date.now() }
          });
        }
      }
    }
  }
};
</script>

<style scoped>
.main-container {
  height: 100vh;
  background-image: url('../assets/images/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.nav-aside {
  background: #000911;
  position: relative;
  z-index: 2;
}

.content-main {
  padding: 0;
  position: relative;
  overflow: hidden;
  height: calc(100vh - 20px);
}

.content-border {
  width: 97%;
  height: 97%;
  margin: 1.5%;
}

.list {
  position: absolute;
  top: 15%;
  left: 18%;
  width: 58%;
  height: 80%;
  overflow: hidden;
  background-color: #0d1b3039;
}

.circle {
  position: absolute;
  top: 15%;
  left: 2%;
  width: 15%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(250, 235, 215, 0.075);
}

.temperature, .heart, .pressure {
  width: 90%;
  height: 30%;
  margin-top: 15px;
  margin-bottom: 5px;
  margin-left: 5%;
  margin-right: 5%;
  color: azure;
}

.detaildata{
  z-index: 10;
  background-color: transparent;
  border: none;
  color: aliceblue;
  font-size: 1em;
}

.c{
  position: absolute;
  width: 30%;
  padding: 20px;
  background-color: #00000056;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1.2 / 1;
}

.dv-decoration-9{
  width:100%;
  height:100%;
}

.glass-container {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  height: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(48, 111, 114, 0.192) 50%, rgba(255, 255, 255, 0) 100%);
  border-radius: 15px;
  color: #16a7a7;
}

.content {
  text-align: center;
  color: #16a7a7;
  padding: 20px;
  width: 100%;
}

.decoration {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 8%;
  width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time {
  background-color: rgba(240, 248, 255, 0.057);
  position: absolute;
  top: 15.5%;
  right: 2%;
  width: 21%;
  height: 19%;
}

.dangerous{
  position: absolute;
  top: 35%;
  right: 2%;
  width: 21%;
  height: 30%;
  overflow: hidden;
}

.warning{
  position: absolute;
  top: 65%;
  right: 2%;
  width: 21%;
  height: 30%;
  overflow: hidden;
}

.dangerous, .warning {
::v-deep .header-item:nth-child(1),
::v-deep .ceil:nth-child(1) {
width: 5%!important;
}

::v-deep .header-item:nth-child(2),
::v-deep .ceil:nth-child(2) {
width: 20%!important;
}

::v-deep .header-item:nth-child(3),
::v-deep .ceil:nth-child(3) {
width: 25%!important;
}

::v-deep .header-item:nth-child(4),
::v-deep .ceil:nth-child(4) {
width: 20%!important;
}

::v-deep .header-item:nth-child(5),
::v-deep .ceil:nth-child(5) {
width: 20%!important;
}
}

.dv-border-box-12{
  width: 100% !important;
  height: 100% !important;
}

.dv-scroll-board {
  height: 90% !important;
  padding: 2%;
}

@media screen and (max-width: 1440px) {
  .list {
    left: 22%;
    width: 58%;
  }
}

@media screen and (max-width: 1024px) {
  .list {
    left: 25%;
    width: 55%;
  }

  .decoration {
    left: 25%;
  }

  .circle {
    left: 2%;
    width: 18%;
  }
}

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: cover;
}

.status-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 0 5px;
}

.list{
::v-deep .header-item:nth-child(1),
::v-deep .ceil:nth-child(1) {
width: 5%!important;
}

::v-deep .header-item:nth-child(2),
::v-deep .ceil:nth-child(2) {
width: 15%!important;
}

::v-deep .header-item:nth-child(3),
::v-deep .ceil:nth-child(3) {
width: 12%!important;
}

::v-deep .header-item:nth-child(4),
::v-deep .ceil:nth-child(4) {
width: 10%!important;
}

::v-deep .header-item:nth-child(5),
::v-deep .ceil:nth-child(5) {
width: 10%!important;
}

::v-deep .header-item:nth-child(6),
::v-deep .ceil:nth-child(6) {
width: 35%!important;
}
}

::v-deep .dangerous.dv-scroll-board .header-item {
  text-align: center !important;
  line-height: 1.2 !important;
  padding: 8px 5px !important;
}

::v-deep .warning.dv-scroll-board .header-item {
  text-align: center !important;
  line-height: 1.2 !important;
  padding: 8px 5px !important;
}

.status-cell img {
  pointer-events: none; /* 防止图片阻止点击事件 */
}
</style>
